/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import PropTypes from 'prop-types';
import { Input, Grid, Button, Switch, Feedback } from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;
export default class EditChannelForm extends Component {
  static displayName = 'EditChannelForm';

  static propTypes = {
    onSubmit : PropTypes.func.isRequired,
  };

  static defaultProps = {};

  constructor(props) {
    super(props);
    if(this.props.value){
      this.state = {
        value: {
          ...this.props.value,
          enable : !this.props.value.disable
        },
      };
    }else{
      this.state = {
        value: { enable: true },
      };
    }
  }

  formChange = (value) => {
    this.setState({ value });
  };

  validateAllFormField = () => {
    this.setState({loading : true})
    this.refs.form.validateAll(async(errors, values) => {
      if (errors) { this.setState({loading : false}); return; }
      let flag = await this.props.onSubmit({
        ...values,
        disable : !values.enable
      })
      if(flag){
        Feedback.toast.success('提交成功');
      }else{
        Feedback.toast.error('提交失败');
      }
      this.setState({loading : false})
    });
  };

  render() {
    return (
      <div className="user-form">
        <IceContainer>
          <IceFormBinderWrapper
            value={this.state.value}
            onChange={this.formChange}
            ref="form"
          >
            <div style={styles.formContent}>
              <h2 style={styles.formTitle}>编辑渠道</h2>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>渠道编码:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="id" required max={10} message="渠道编码必填">
                    <Input size="large" placeholder="请输入渠道编码" style={{ width: '100%' }} disabled/>
                  </IceFormBinder>
                  <IceFormError name="id" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>渠道名称:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="name" required max={50} message="渠道名称必填">
                    <Input size="large" placeholder="请输入渠道名称" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <IceFormError name="name" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>备注:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="memo" max={50}>
                    <Input size="large" placeholder="请输入备注信息" style={{ width: '100%' }} multiple="true"/>
                  </IceFormBinder>
                  <IceFormError name="memo" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>是否启用:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="enable">
                    <Switch defaultChecked={this.state.value.enable}/>
                  </IceFormBinder>
                  <IceFormError name="enable" />
                </Col>
              </Row>

            </div>
          </IceFormBinderWrapper>

          <Row style={{ marginTop: 20 }}>
            <Col offset="3">
              <Button type="primary" loading={this.state.loading} disabled={this.state.loading} onClick={this.validateAllFormField}> 提 交 </Button>
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    marginBottom: 25,
  },
  formLabel: {
    height: '32px',
    lineHeight: '32px',
    textAlign: 'right',
    paddingRight : '5px',
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
